<template>
  <div class="expenseList">
    <tab active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex">
        <span>{{item}}</span>
      </tab-item>
    </tab>
    <swiper ref="swiper" v-if="getAuth('expense:expenseForm:query')" v-model="currentIndex" :show-dots="false"
            @on-index-change="setHeight">
      <swiper-item :key="123">
        <group ref="swiper_item" gutter="10px">
          <cell
            is-link
            title="审批中"
            :border-intent="false"
            :arrow-direction="approval ? 'up' : 'down'"
            @click.native="getList('approval',[1,2])">
            <span slot="after-title" class="after-title">({{count.auditCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-shenhe@3x.png"/></span>
          </cell>
          <template v-if="approval">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in approvalList">
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{_numberComma(item.fillAmount)}}</p>
              <span>{{_dateFormat(item.createdTime)}}
                <span>等待 {{getTrialsPersons(item)}} 审批</span>
              </span>
              <div slot="child"><span style="color:#43A2FE;font-size: 15px"
                                      @click="gotoExpenseDetail(item.id,0)">查看</span></div>
            </cell>
          </template>
          <cell
            title="已驳回"
            is-link
            :border-intent="false"
            :arrow-direction="reject ? 'up' : 'down'"
            @click.native="getList('reject',[4])">
            <span slot="after-title" class="after-title">({{count.turndownCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-bohui@3x.png"/></span>
          </cell>
          <template v-if="reject">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in rejectList">
              <div slot="child" @click="gotoExpenseForm(item.id)"><i class="fa fa-edit"
                                                                     style="color:#43A2FE;font-size: 0.2rem"></i>
              </div>
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{_numberComma(item.fillAmount)}}</p>
              <span>{{_dateFormat(item.createdTime)}}</span>
            </cell>

          </template>
          <cell
            title="已同意"
            is-link
            :border-intent="false"
            :arrow-direction="agree ? 'up' : 'down'"
            @click.native="getList('agree',[3])">
            <span slot="after-title" class="after-title">({{count.agreedCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-tongyi@3x.png"/></span>
          </cell>
          <template v-if="agree">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in agreeList">
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{_numberComma(item.secondTrialAmount)}}</p>
              <span>{{_dateFormat(item.createdTime)}}</span>
              <div slot="child"><span style="color:#43A2FE;font-size: 15px"
                                      @click="gotoExpenseDetail(item.id,1)">查看</span></div>
            </cell>
          </template>
        </group>
      </swiper-item>
      <swiper-item :key="456">
        <group ref="swiper_item" gutter="10px">
          <cell
            title="草稿"
            is-link
            :border-intent="false"
            :arrow-direction="draft ? 'up' : 'down'"
            @click.native="getList('draft',[0])">
            <span slot="after-title" class="after-title">({{count.draftCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-caogao@3x.png"/></span>
          </cell>
          <template v-if="draft">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in draftList">
              <div v-if="getAuth('expense:expenseForm:update')" slot="child" @click="gotoExpenseForm(item.id)"><i
                class="fa fa-edit"
                style="color:#43A2FE;font-size: 0.2rem"></i>
              </div>
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{_numberComma(item.fillAmount)}}</p>
              <span>{{_dateFormat(item.createdTime)}}</span>
            </cell>
          </template>
        </group>
      </swiper-item>
    </swiper>
    <div class="addOrder" @click="gotoExpenseForm()" v-if="getAuth('expense:expenseForm:add')"></div>
  </div>
</template>

<script>
  import {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    Cell,
    CellBox,
    CellFormPreview,
    Badge,
    Confirm,
    TransferDom
  } from 'vux'

  export default {
    name: "expenseList",
    directives: {
      TransferDom
    },
    components: {
      Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm
    },
    data() {
      return {
        list: ['已提交', '未提交'],
        currentIndex: 0,
        approval: false,//审批
        approvalList: [],
        reject: false,//驳回
        rejectList: [],
        agree: false,//同意
        agreeList: [],
        draft: false,//草稿
        draftList: [],
        notice: false,//提示框
        count: {
          auditCount: 0,//审批
          turndownCount: 0,//驳回
          agreedCount: 0,//同意
          draftCount: 0,//草稿
        },
      }
    },
    mounted() {
      this.$http.get('/expense/api/expenseForm/expenser/count').then(res => {
          this.count = res.data.data;
        }
      );

      this.setHeight();
    },
    computed: {},
    methods: {
      // 获取对应的列表信息
      getList(index, arr) {
        this[index] = !this[index];
        if (!this[index]) return;
        let promises = [];
        arr.forEach(r => {
          promises.push(new Promise((resolve, reject) => {
            let params = {
              expenseUserId: this.$store.state.user.userInfo.id,
              noPage: true,
              include: true,
              status: r,
              fields: 'id,createdTime,fillAmount,status,workOrderCode,firstTrials,firstTrialAmount,secondTrials,secondTrialAmount'
            };
            this.$http.get('/expense/api/expenseForm', {params: params}).then(res => {
                resolve(res.data.data)
              }
            );
          }))
        });
        Promise.all(promises).then(res => {
          this[index + 'List'] = [].concat.apply([], res);
        })
      },
      // 获取当前审批人列表
      getTrialsPersons(data) {
        if (data.status === 1) {
          return data.firstTrials.map(item => {
            return item.nickName
          }).join(',')
        } else if (data.status === 2) {
          return data.secondTrials.map(item => {
            return item.nickName
          }).join(',')
        }
      },
      //跳转报销单详情界面
      gotoExpenseDetail(id,auth) {
        this.$router.push({
          path: "CostSecondTrial",
          query: {id: id,type:1,auth:auth}
        });
      },
      // 跳转报销单界面
      gotoExpenseForm(id) {
        this.$router.push({
          path: "createExpenseForm",
          query: {id: id}
        });
      },
      //设置swapper高度
      setHeight() {
        this.$nextTick(() => {
          this.$refs.swiper.xheight = this.$refs.swiper_item.clientHeight + 'px'
        })
      },
    }
  }
</script>

<style lang="less">
  .expenseList {
    .sub-item {
      .weui-cell__ft {
        span, p {
          font-size: 15px;
        }
      }
    }
    .after-title {
      color: #8e8e8e;
      margin-left: .15rem;
    }
    .vux-slider {
      position: absolute;
      left: 0;
      right: 0;
      top: 44px;
      bottom: 0;
      .vux-swiper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
        right: 0;
      }
    }
    .v-transfer-dom {
      .weui-dialog__btn_primary {
        color: #3FBCFC;
      }
    }
    .weui-cells {
      .weui-cell_access {
        .weui-cell__ft:after {
          border-color: #3FBCFC;
        }
      }
    }
    .addOrder{
      width: 0.5rem;
      height: 0.5rem;
      position: fixed;
      z-index: 2;
      bottom: 0.3rem;
      left: 50%;
      background: url("~assets/images4/icon-tianjiabaoxiao@2x.png") no-repeat;
      background-size: 100%;
      transform: translateX(-50%);
    }
  }


</style>
